<template>
    <div class="view">
		<div class="page-statistics">
			<div class="m-header">
				<div class="name">{{rankInfo.roomName ? rankInfo.roomName:''}}</div>
				<div class="right_box">
					<span>{{rankInfo.className ? rankInfo.className :''}}</span>
					<span>平均分：{{rankInfo.average ? rankInfo.average :0}}分</span>
					<span>参与人数：{{rankInfo.count ? rankInfo.count :0 }}人</span>
				</div>
			</div>
			<div class="m-con">
				<div class="list">
					<div class="list-item" v-for="(item,index) in rankList" :key="index">
						<div class="order">{{index +1}}</div>
						<img class="Img" :src="item.avatar?item.avatar:headError" alt="" :onerror="headError">
						<div class="name">{{item.name}}</div>
						<div class="num">{{item.score?item.score:0}}分</div>
					</div>
				</div>
                <div class="vTips_empty" v-if="!rankList || !rankList.length">暂无数据</div>
			</div>
		</div>
	</div>
</template>

<script>
import * as api from '@/api/index';
import { mapGetters } from 'vuex';
export default {
    data(){
        return{
            headError: this.$store.state.headError,
            roomId:this.$route.query.roomId,
            classId:this.$route.query.classId,
            userInfo:JSON.parse(localStorage.getItem('userInfo')),
            rankInfo:{},
            rankList:[],
        }
    },
    mounted(){
        this.getRoomScoreDetailByClass()
    },
    methods:{
        async getRoomScoreDetailByClass(){
            var data={
                classId:this.classId,
                futureId:this.userInfo.futureId,
                roomId:this.roomId
            }
            var res=await api.getRoomScoreDetailByClass(data)
            if(res.resultCode==1){
                this.rankInfo = res.value?res.value:{}
                this.rankList= this.rankInfo.roomScoreList? this.rankInfo.roomScoreList:[]
            }
        }
    }
}
</script>


<style lang="scss" scoped>
.page-statistics{
	padding: 0.3rem 0.4rem;
}
.m-header {
	height: 1.5rem;
	font-size: 0.45rem;
	color: #05b3b6;
	border-bottom: 0.05rem dotted #e6eedb;
	font-weight: bold;
	.name{
		width: 100%;
        padding-left: 0.2rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.right_box {
		display: flex;
		margin-top: 0.2rem;
		font-size: 0.28rem;
		span{
			padding-left: 0.2rem;
		}
	}
}
.m-con {
	padding: 0 0 2.4rem 0;
	width: 100%;
	.list{
		flex: 1;
		overflow: auto;
	}
	.list-item {
		display: flex;
		height: 1rem;
		align-items: center;
		line-height: 1rem;
		text-align: center;
		font-size: 0.36rem;
		color: #333333;
		padding-right: .2rem;
		.order {
			color: #05b3b6;
			font-size: 0.32rem;
			width: .5rem;
			text-align: center;
		}
		.Img {
			width: 0.6rem;
			height: 0.6rem;
			border-radius: 0.3rem;
			margin-left: 0.4rem;
		}
		.name {
			width: 2.5rem;
			text-align: left;
			margin-left: 0.4rem;
		}
		.num {
			flex: 1;
			text-align: right;
		}
	}
}
</style>
